<html>
<meta charset="utf-8">

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        span {
            display: block;
            background-color: pink;
        }

        [title=test] {
            background-color: whitesmoke;
        }

        [title~=tt] {
            color: green;
        }

        [lang|=en] {
            color: red;
        }
        p[title="type"]{
            color: purple;
        }
    </style>
</head>
<div>
    <h3>属性选择器</h3>
    <span>
    span{
        display:block;
    }
</span>
    <h3>属性和值选择器 [title=test]</h3>
    <p title="test"> title=test</p>
    <p> 无title</p>
    <h3>属性和值选择器 多值（包含） [title~=tt]</h3>
    <p title="tt ss">title="tt ss"</p>
    <p title="aatt">title="aatt" 中间没有空格，不会被选取到</p>
    <h3>属性和值选择器 多值2 [lang|=en]</h3>
    <p lang="en">lang="en"</p>
    <p lang="en-us">lang="en-us" 中间米有空格也会被选取到</p>
    <h3>表单元素 p[title='type'] (元素和内部的值选择)</h3>
    <p title="type">title="type"</p>

</div>

</html>